var img_box = document.getElementsByClassName("img_box");
var box = document.getElementsByClassName("box");
var dot = document.getElementsByClassName("dot");

var index = 1;
var timer = null;

document.getElementsByClassName("leftBtn")[0].onclick = function () {
    change(index - 1);
}

document.getElementsByClassName("rightBtn")[0].onclick = function () {
    change(index + 1);
}
dot[0].onclick=function(){
    change(1);
}
dot[1].onclick=function(){
    change(2);
}
dot[2].onclick=function(){
    change(3);
}
dot[3].onclick=function(){
    change(4);
}
dot[4].onclick=function(){
    change(5);
}



timer = setInterval(function () {
    change(index + 1)
}, 3000);

box[0].onmouseover = function () {
    clearInterval(timer);
}
box[0].onmouseout = function () {
    timer = setInterval(function () {
        change(index + 1);
    }, 3000);
}


function change(crrIndex) {
    console.log(crrIndex)
    if (crrIndex < 1) {
        index = 5;
    } else if (crrIndex > 5) {
        index = 1;
    } else {
        index = crrIndex;
    }
    img_box[0].style="margin-left:"+crrIndex * -800 +"px";
    if(crrIndex>5){
        img_box[0].style="margin-left:"+ -800 +"px";
    }else if(crrIndex<1){
        img_box[0].style="margin-left:"+ 5 * -800 +"px";
    }

    for(var i=0;i<dot.length;i++){
        dot[i].classList.remove("active");
    }
    dot[index - 1].classList.add("active");
}


